<template>
  <view class="popup" v-if="value">
    <view class="popup__box">
      <view
        class="popup__box__container"
        :class="[gameOver && 'popup__box__container__bg']"
      >
        <text
          class="popup__box__container__title"
          id="title"
          :class="[title === '汤大师酸酸辣辣叉烧豚骨面' && 'smallFontSize']"
        >
          {{ title }}
        </text>
        <text class="popup__box__container__txt">
          {{ txt }}
        </text>
        <text
          @click="handleClosePopup"
          class="popup__box__container__icon"
        ></text>

        <image
          v-show="!gameOver"
          :src="img"
          mode="scaleToFill"
          class="popup__box__container__pm"
        />
        <view class="popup__box__btn" v-show="gameOver" @click="handleJump">
          <text class="first">抽</text>
          <!-- <image src="/static/images/pm8.png" /> -->
          <text class="first1">奖</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    gameOver: {
      type: Boolean,
      default: false,
    },
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    txt: {
      type: String,
      default: '',
    },
    img: {
      type: String,
      default: '',
    },
  },

  data() {
    return {}
  },
  components: {},
  methods: {
    handleClosePopup() {
      this.$emit('close')
    },
    handleJump() {
      location.href = 'https://wx2.ismartgo.com/epcamp/camp/sqb5/index?e_ccd=4lRZs4HZwt2tkFDs&e_scd=DLDNhnHJOt2tm1Ey&e_sign=6b9475761f7262786ea92cff6e5326f3'
    },
  },
}
</script>

<style lang='scss' scoped>
.popup {
  margin: 0 auto;
  &:after {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 99;
  }

  &__box {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    right: -18px;
    &__container {
      position: relative;
      z-index: 100;
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      background: url('/static/images/pop_bg.png') no-repeat 50% 50%;
      background-size: 100% auto;
      width: 877rpx;
      height: 522rpx;
      left: 0;
      right: 0;
      top: 0;
      margin: 0 auto;
      padding: 30rpx;
      border-radius: 8rpx;
      font-size: 30rpx;
      color: #fff;
      text-align: center;
      animation: bounce 2s ease 0s forwards;
      &__pm {
        width: 300rpx;
        height: 300rpx;
        position: absolute;
        bottom: 0;
        right: -45rpx;
      }
      &__title {
        font-size: 36rpx;
        top: 40rpx;
        left: 10rpx;
        position: relative;
        &.smallFontSize {
          font-size: 31rpx;
        }
      }
      &__txt {
        display: block;
        line-height: 34rpx;
        min-height: 490rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      &__bg {
        background: url('/static/images/over.png') no-repeat 50% 50%;
        background-size: 100% auto;
        .popup__box__container__icon {
          right: 56rpx;
          top: 90rpx;
        }
      }
      &__icon {
        position: absolute;
        content: '';
        display: block;
        width: 50rpx;
        height: 50rpx;
        background: url('/static/images/close.png') no-repeat 50% 50%;
        background-size: 100% auto;
        right: 40rpx;
        bottom: 0;
        top: 110rpx;
      }
    }
    &__btn {
      width: 300rpx;
      font-size: 60rpx;
      margin: -40rpx auto;
      border: 3rpx solid #ffaf31;
      border-radius: 8rpx;
      padding: 5rpx 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0c9096;
      overflow: hidden;
	  min-height: 110rpx;
      image {
        width: 117rpx;
        height: 117rpx;
      }
      .first {
        position: relative;
        left: -4rpx;
      }
      .first1 {
        position: relative;
        right: -4rpx;
      }
    }
  }
}
</style>
